<template>
  <div class="chat-tab">
    <div
      class="chat-content"
      :class="{'no-tim': !showChat}"
      @click="isShowEmotion = false"
    >
      <div
        v-if="!showChat"
        class="no-chat-view"
      >
        <img
          src="~assets/live/fly_boy.png"
          class="fly-boy-icon"
        >
        <span class="no-chat-text">{{ getLiveStatusText() }}</span>
      </div>
      <TIM
        v-else
        ref="tim"
        class="tim-view"
        :group-id="$route.query.sectionId"
        @ready="isReady = $event"
        @liveStatus="$emit('liveStatus', $event)"
      />
    </div>

    <div
      class="chat-input-bottom"
    >
      <template v-if="disabledField">
        <div
          v-if="$store.state.userInfo.UserId === '-1'"
          class="emoji-input fake-input"
        >
          <img
            src="~assets/live/register_text.png"
            class="login-img"
            @click="onClickRegister"
          >
          <span class="fake-input-placeholder">后进行发言</span>
        </div>
        <div
          v-else
          class="emoji-input fake-input"
        >
          <span class="fake-input-placeholder">我要发言</span>
        </div>
        <img
          src="~assets/live/smile_gray.png"
          class="smile-icon"
        >
        <van-button
          class="submit-btn submit-btn-disabled"
          disabled
        >
          发送
        </van-button>
      </template>
      <template v-else>
        <EmojiInput
          ref="emojiInput"
          class="emoji-input"
        />
        <img
          src="~assets/live/smile_blue.png"
          class="smile-icon"
          @click.stop="onClickSmile"
        >
        <van-button
          class="submit-btn"
          @click="onSendOut"
        >
          发送
        </van-button>
      </template>
    </div>
    <EmotionComp
      v-show="isShowEmotion"
      ref="emotionComp"
      @appendInputValue="appendMessageText"
    />
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    EmotionComp: () => import('components/Live/EmotionComp.vue'),
    TIM: () => import('components/Live/TIM.vue'),
    EmojiInput: () => import('components/Live/Chat/EmojiInput.vue'),
  },
  props: {
    liveStatus: {
      // 直播状态 1：直播中2：未开始3：直播结束4：老师正在赶来的路上5：直播暂停
      default: 0,
      type: Number,
    },
    showChat: {
      default: false,
      type: Boolean,
    },
  },
  data () {
    return {
      message: '',
      isShowEmotion: false,
      // isReady: false,
      isReady: true,
    }
  },
  computed: {
    disabledField (): boolean {
      if (this.$store.state.userInfo.UserId === '-1' ||
       this.liveStatus === 2 || this.liveStatus === 3 ||
       this.liveStatus === 4 || !this.isReady) {
        return true
      }
      return false
    },
  },
  created () {},
  methods: {
    getLiveStatusText () {
      switch (this.liveStatus) {
        case 2:
        case 4:
          return '直播尚未开始'
        case 3:
          return '直播已结束'
        default:
          break
      }
    },
    onClickSmile () {
      this.isShowEmotion = !this.isShowEmotion
      // if (this.isShowEmotion) {
      //   (this.$refs.emojiInput as any).focus()
      // }
    },

    // 表情包追加在input内
    appendMessageText (emojiName: String) {
      (this.$refs.emojiInput as any).insertEmoji(emojiName)
    },

    // 点击发送
    onSendOut () {
      const msg = (this.$refs.emojiInput as any).getContent()
      if (!msg || !msg.trim()) {
        return
      }
      this.isShowEmotion = false;

      (this.$refs.tim as any).sendMsg(msg).then(() => {
        (this.$refs.emojiInput as any).clearContent()
      })
    },
    onClickRegister () {
      sessionStorage.setItem('loginFromPage', JSON.stringify({
        from: this.$route.name,
        query: this.$route.query,
      }))
      this.$router.push({ name: 'register' })
    },
  },
})
</script>
<style lang="scss" scoped>
.tim-view {
  height: 100%;
}
.chat-input-bottom {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #fff;
  @include px1border(top, #E9E9E9);
}
.emoji-input {
  width: calc(100% - 200px);
  height: 68px;
  line-height: 70px;
  margin-left: 20px;
  margin-right: 10px;
  border-radius: 34px;
  background-color: #F3F3F3;
  font-size: 28px;
  padding-left: 20px;
}
.fake-input {
  display: flex;
  align-items: center;
  color: #969799;
}
.login-img {
  width: 52px;
  margin-right: 10px;
}
.smile-icon {
  width: 58px;
}
.submit-btn, .submit-btn-disabled {
  margin: 0 20px 0 10px;
  width: 140px;
  height: 66px;
  line-height: 70px;
  color: #fff;
  text-align: center;
  background: linear-gradient(-69deg,rgba(3,201,187,1) 0%,rgba(94,235,225,1) 100%);
  @include px1border(all, #fff);
  border-radius: 33px;
}
.submit-btn-disabled {
  opacity: 1;
  background: linear-gradient(-69deg,rgba(204,204,204,1) 0%,rgba(176,176,176,1) 100%);
}
.chat-tab {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.chat-content {
  flex: 1;
  overflow: hidden;
}
.no-tim {
  display: flex;
  flex: 1;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
.no-chat-view {
  text-align: center;
}
.fly-boy-icon {
  width: 209px;
}
.no-chat-text {
  font-size: 26px;
  display: block;
  margin-top: 25px;
}
</style>
